import React from 'react'
import './Swiper.css'
const log = console.log.bind(console)

class Swiper extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            index: 0,
            data: [],
            offset: 0,
            animate: true,
            start: 0,
            end: 0,
        }
    }

    componentDidMount() {
        this.initData()
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevProps.data !== this.props.data) {
            this.initData()
        }
    }

    initData = () => {
        let data = this.props.data
        let len = data.length
        data = [data[len - 1], ...data, data[0]]
        this.setState({
            data,
        })
    }

    onTouchStart = (e) => {
        let point = e.touches[0]
        let start = point.screenX
        this.setState({
            start,
            animate: false,
        })
    }

    onTouchMove = (e) => {
        let point = e.touches[0]
        let start = this.state.start
        let end = point.screenX
        let offset = end - start
        this.setState({
            offset,
        })
    }

    onTouchEnd = (event) => {
        const offset = this.state.offset
        const abs = Math.abs(offset)
        if (abs > 50) {
            const cur = this.state.index
            let next = offset > 0 ? cur - 1 : cur + 1
            this.setState({
                animate: true,
                offset: 0,
                index: next,
            })
        } else {
            this.setState({
                animate: true,
                offset: 0,
            })
        }

    }

    onTransitionEnd = () => {
        const index = this.state.index
        const data = this.props.data
        const last = data.length - 1
        if (index === - 1) {
            this.setState({
                animate: false,
                index: last,
            })
        } else if (index === last + 1) {
            this.setState({
                animate: false,
                index: 0,
            })
        }
    }

    render() {
        const data = this.state.data
        const curIndex = this.state.index
        const x = window.innerWidth * (curIndex + 1) - this.state.offset
        const itemStyle = this.props.itemStyle
        return <div style={{position: 'relative', overflow: 'hidden',}}>
            <div
                className='swiper-container'
                onTouchStart={(e) => this.onTouchStart(e)}
                onTouchMove={(e) => this.onTouchMove(e)}
                onTouchEnd={(e) => this.onTouchEnd(e)}
                onTransitionEnd={() => this.onTransitionEnd()}
                style={{
                    transform: `translateX(-${x}px)`,
                    transition: this.state.animate ? 'all 0.5s' : '',
                }}
            >
                {data.map((src, index) => {
                    return <div
                        className='pd-12 swiper-item'
                        style={itemStyle ? {...itemStyle} : {}}
                        key={index}
                        onClick={() => this.props.onSwiperItemClick && this.props.onSwiperItemClick(this.state.index)}
                    >
                        <img src={src} alt='' style={{width: '100%',}}/>
                    </div>
                })}
            </div>
            <div
                className='indicator-container'
            >
                {data.slice(1, data.length - 1).map((_, index) => {
                    let cls = 'indicator'
                    if (index === curIndex) {
                        cls += ' indicator-active'
                    }
                    return <div key={index} className={cls}/>
                })}
            </div>
        </div>
    }
}

export default Swiper